<template>
  <el-dialog
    v-model="visible"
    :title="props.id ? '修改TikTok申请开户' : 'TikTok申请开户'"
    width="60%"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <div>
      <ApplyStepView />
      <div style="margin-top: 20px">
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          class="application-form"
        >
          <el-form-item
            label="公司名称"
            prop="enterpriseName"
            class="form-item"
          >
            <el-input
              v-model="formData.enterpriseName"
              placeholder="请输入公司名称"
            />
          </el-form-item>
          <el-form-item
            label="公司注册地址 "
            prop="enterpriseAddress"
            class="form-item"
          >
            <el-input
              v-model="formData.enterpriseAddress"
              placeholder="请输入公司注册地址 "
            />
          </el-form-item>
          <el-form-item
            label="公司营业地址 "
            prop="businessHourAddress"
            class="form-item"
          >
            <el-input
              v-model="formData.businessHourAddress"
              placeholder="请输入公司营业地址 "
            />
          </el-form-item>
          <el-form-item label="官网链接" prop="promotionLink" class="form-item">
            <el-input
              v-model="formData.promotionLink"
              placeholder="请输入官网链接"
            />
          </el-form-item>
          <el-form-item
            label="账户时区"
            prop="accountTimeZone"
            class="form-item"
          >
            <el-input
              v-model="formData.accountTimeZone"
              placeholder="请输入账户时区 "
            />
            <!-- <el-select
              v-model="formData.accountTimeZone"
              placeholder="请选择时区"
              style="width: 100%"
            >
              <el-option label="Asia/Shanghai/UTC+8" value="Asia/Shanghai" />
              <el-option label="Asia/Tokyo/UTC+9" value="Asia/Tokyo" />
              <el-option label="Asia/Seoul/UTC+9" value="Asia/Seoul" />
              <el-option label="Asia/Manila/UTC+8" value="Asia/Manila" />
              <el-option label="Asia/Bangkok/UTC+7" value="Asia/Bangkok" />
              <el-option label="Asia/Jakarta/UTC+7" value="Asia/Jakarta" />
              <el-option label="Asia/Singapore/UTC+8" value="Asia/Singapore" />
              <el-option
                label="Asia/Kuala_Lumpur/UTC+8"
                value="Asia/Kuala_Lumpur"
              />
              <el-option label="Asia/Hong_Kong/UTC+8" value="Asia/Hong_Kong" />
              <el-option label="Asia/Taipei/UTC+8" value="Asia/Taipei" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="投放地区" prop="deliverArea" class="form-item">
            <el-input
              v-model="formData.deliverArea"
              placeholder="请输入投放地区"
              type="textarea"
            />
          </el-form-item>
          <el-form-item label="账户授权邮箱" prop="email" class="form-item">
            <el-input
              v-model="formData.email"
              placeholder="请输入账户授权邮箱"
            />
          </el-form-item>

          <el-form-item
            label="营业执照附件"
            prop="businessLicenseUrl"
            class="form-item"
          >
            <ImageUpload v-model="formData.businessLicenseUrl" :limit="1" />
          </el-form-item>
          <el-form-item label="联系人" prop="contactName" class="form-item">
            <el-input
              v-model="formData.contactName"
              placeholder="请输入联系人"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="联系人电话"
            prop="contactPeople"
            class="form-item"
          >
            <el-input
              v-model="formData.contactPeople"
              maxlength="11"
              placeholder="请输入联系人电话"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <el-button @click="handleCancel"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit">
        {{ formData.id ? "修改" : "提交开始申请" }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import ApplyStepView from "../apply-step.vue";
import { ElMessage } from "element-plus";
import { handleApply } from "@/utils/accountApply";
import { ref, computed, reactive } from "vue";
import { applyPlatform } from "@/const/index.ts";
import { getApplyAccountDetail, editApplyAccount } from "@/api/apply/index.js";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: "",
  },
});

const emits = defineEmits(["update:value", "on-success"]);
const formRef = ref();
const detailInfo = ref({});
const visible = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});

const formData = reactive({
  systemType: applyPlatform.MEDIAGO,
  enterpriseName: "",
  enterpriseAddress: "",
  businessHourAddress: "",
  promotionLink: "",
  accountTimeZone: "",
  deliverArea: "",
  email: "",
  businessLicenseUrl: "",
  contactName: "",
  contactPeople: "",
});

const formRules = reactive({
  enterpriseName: [
    { required: true, message: "请输入公司名称", trigger: "blur" },
  ],
  enterpriseAddress: [
    { required: true, message: "请输入公司注册地址", trigger: "blur" },
  ],
  businessHourAddress: [
    { required: true, message: "请输入公司经营地址", trigger: "blur" },
  ],
  promotionLink: [
    { required: true, message: "请输入官网链接", trigger: "blur" },
    {
      pattern: /^https?:\/\/.+/,
      message: "请输入正确的网站链接",
      trigger: "blur",
    },
  ],
  // accountTimeZone: [{ required: true, message: "请选择时区", trigger: "blur" }],
  deliverArea: [{ required: true, message: "请输入投放地区", trigger: "blur" }],
  businessLicenseUrl: [
    { required: true, message: "请上传添加营业执照附件", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入谷歌邮箱", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱格式",
      trigger: "blur",
    },
  ],
  contactName: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  contactPeople: [
    { required: true, message: "请输入联系联系电话", trigger: "blur" },
  ],
});

// 提交表单
function handleSubmit() {
  try {
    if (!formRef.value) return;

    formRef.value.validate(async (valid) => {
      if (valid) {
        formData.mediaMediago = {
          // enterpriseAddress: formData.enterpriseAddress,
          businessHourAddress: formData.businessHourAddress,
          accountTimeZone: formData.accountTimeZone,
          deliverArea: formData.deliverArea,
        };
        if (formData.id) {
          formData.mediaMediago.id = detailInfo.value.mediaMediago.id;
          formData.mediaMediago.mediaId = detailInfo.value.mediaMediago.mediaId;
          await editApplyAccount(formData);
          emits("on-success");
          ElMessage.success("修改成功");
        } else {
          await handleApply(formData);
          ElMessage.success("申请成功");
        }
        visible.value = false;
      }
    });
  } catch (error) {}
}

// 取消
function handleCancel() {
  visible.value = false;
  // 重置表单数据
  Object.assign(formData, {
    enterpriseName: "",
    enterpriseAddress: "",
    businessHourAddress: "",
    promotionLink: "",
    accountTimeZone: "",
    deliverArea: "",
    email: "",
    businessLicenseUrl: "",
    contactName: "",
    contactPeople: "",
    mediaMediago: {},
  });
  formRef.value?.resetFields();
}

function getDetail() {
  getApplyAccountDetail(props.id).then(({ data }) => {
    detailInfo.value = data;
    Object.assign(formData, {
      ...data,
      ...data.mediaMediago,
    });
  });
}

watch(
  () => visible.value,
  (val) => {
    if (val && props.id) {
      getDetail();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
